<template>
  <div>
    <van-cell style="height: 18vh;" to="/user/userInfo">
      <van-col :span="7" style="padding-top: 15px;">
        <van-image round width="1.8rem" height="1.8rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
      </van-col>
      <van-col :span="15">
        <h2>
          <span>{{userInfo.username}}</span>
        </h2>
        <p>
          学号:
          <span>{{userInfo.number}}</span>
        </p>
      </van-col>
      <van-col :span="2" style="line-height: 20vh; text-align: right;">
        <van-icon name="arrow" color="#898989" size="16px" />
      </van-col>
    </van-cell>

    <van-cell icon="like" style="margin-top: 1.5vh;" title="心理咨询预约" is-link to="/mental/health" />
    <van-cell icon="bookmark" style="margin-top: 1.5vh;" title="收藏夹" is-link />
    <van-cell icon="medal" title="查看奖项" is-link to="/award/list" />
    <van-cell icon="cluster" title="学生组织报名" is-link to="/user/application/list" />
    <van-cell icon="award" title="比赛报名" is-link to="/activity/application" />
    <van-cell icon="phone-circle-o" title="热线电话" is-link @click="showDialog" />
    <van-cell icon="setting-o" style="margin-top: 1.5vh;" to="/user/option" title="设置" is-link />
    <van-dialog use-slot v-model="show" @confirm="show = false">
      <van-cell>
        <p style="font-size:16px">热线电话： 111-5555-5555</p>
      </van-cell>
    </van-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  data() {
    return {
      show: false
    };
  },
  methods: {
    showDialog() {
      this.show = true;
    }
  }
};
</script>

<style scope>
</style>